<!-- ‘K手’ 指定时间-->
<template>
  <ele-modal
    class="el-model"
    v-if="timeTitle"
    width="685px"
    :visible="visible"
    :title="timeTitle"
    custom-class="demo-file-sort-dialog"
    @close="updateVisible(false)"
  >
    <div class="flex-wrap">
      <div v-for="(i,j) in dayData" :key="j" @click="ksTimeClick(i,j)">
        <div :class="i.indexOf(':')==-1 ? 'font-cls' : selected.indexOf(i)!=-1 ? 'sel-bj' : 'bj-cls'">{{i}}</div>
      </div>
    </div>
    <div class="btn-class flex">
    <el-button @click="updateVisible(false)">取消</el-button>
    <el-button type="primary" @click="confirm()">确定</el-button>
  </div>
  </ele-modal>
</template>

<script>
  export default {
    name: "time-modal",
    props: {
      tomorrow: String,
      list:[]
    },
    data() {
      return {
        // 弹窗是否打开
        visible: false,
        selected: [],//选中的服务项目名称
        timeTitle:'',
        dayData : ['上午','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','下午','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','晚上','18:30','19:00','19:30',
          '20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30','24:00'],
      }
    },
    created(){
      //假如是2017-10-22
      var reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
      var str=this.tomorrow.match(reg)
      console.log('str[1]+\'年\'+',str,'this.tomorrow',this.tomorrow)
      let date=RegExp.$1 +'年'+RegExp.$2+'月'+RegExp.$3+'日'
    this.timeTitle='指定时间：'+ date
  },
    methods:{
      show(){
        console.log('list==================',this.list)
        if(this.list && this.list.time){
          // 字符串 转 数组
          this.selected=this.list.time
        }
        // 重新赋值
        // if(this.list){
        //   // 字符串 转 数组
        //   this.selected=this.list
        // }
        this.updateVisible(true)
      },
      confirm(){
        /*let list2=[]
        // list 为父组件传入的已赋值数据
        for(let i=0;i<this.selected.length;i++){
          var list ={}
          // 发布日期
          this.list.releaseDate=this.tomorrow.slice(5)
          // 发布时间
          console.log('this.selected[i]',this.selected[i])
          this.list.releaseTime=this.selected[i].split(':')[0]+ '-' + this.selected[i].split(':')[1]
          for (const key in this.list) {
            list[key] = this.list[key]
          }
          list2.push(list)
        }*/
        // console.log('list2=========', list2)
        // timeClick :暂不需要list2的复制
        // this.$emit('timeClick',this.selected,list2) // toString 转字符串
        this.$emit('timeClick',this.selected) // toString 转字符串
        this.updateVisible(false)
      },
      updateVisible(value){
        this.visible=value
        if(value==false){
          this.selected=[]
        }
       },
      ksTimeClick(day,dayIndex){
        console.log("day------",day)
        if(day.indexOf(':')!=-1){
          if (this.selected.indexOf(day) !== -1) {
            this.selected.splice(this.selected.indexOf(day), 1); //取消
          } else {
            this.selected.push(day);//选中添加到数组里
          }
          console.log("selected",this.selected)
        }
      }
    }
  }
</script>

<style scoped lang="less">
div{
  color: #000;
}
.font-cls{
  width: 700px;
  margin: 30px 4px 0;
}
.bj-cls, .sel-bj{
  border: 1px solid #F7F7F7;
  background: #F7F7F7;
  color: #A1A1A1;
  padding: 4px 12px;
  margin:18px 20px 0 0;
}
.sel-bj{
  color: #1E6CEB;
  background: #DDF0FF;
  border: 1px solid #1E6CEB;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.btn-class{
  button{
    width: 100px;
    margin:50px 20px 0;
  }
}
</style>
